<template>
  <van-tabbar
    route
    active-color="#9A0000"
    style="background-color: rgb(155, 0, 0)"
    inactive-color="#fff"
  >
    <van-tabbar-item replace to="/" style="font-size: 15px" icon="home-o">
      首页
    </van-tabbar-item>
    <van-tabbar-item replace to="/sign" style="font-size: 15px">
      <template #icon>
        <n-icon size="20">
          <FaceId />
        </n-icon>
      </template>
      扫脸进入
    </van-tabbar-item>
    <van-tabbar-item replace to="/out" style="font-size: 15px">
      <template #icon>
        <n-icon size="20">
          <CropFreeFilled />
        </n-icon>
      </template>
      扫脸退出
    </van-tabbar-item>
    <van-tabbar-item
      replace
      to="/visitor"
      icon="friends-o"
      style="font-size: 15px"
    >
      访客进入
    </van-tabbar-item>
    <van-tabbar-item
      replace
      to="/visitorout"
      icon="manager"
      style="font-size: 15px"
    >
      访客退出
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { FaceId } from "@vicons/tabler";
import { CropFreeFilled } from "@vicons/material";
export default {
  components: {
    FaceId,
    CropFreeFilled,
  },
};
</script>

<style lang="scss">
.van-tabbar-item {
  border-right: 1px solid black;
}
</style>
